<!-- 新增/编辑指标 -->
<template>
  <a-drawer
    width="45%"
    :visible="drawerVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title> 评分规则设置</template>
    <div>
      <a-form
        :model="templateData"
        ref="refForm"
        :rules="rules"
        auto-label-width
      >
        <a-form-item
          label="考核总分上限"
          field="upperLimitType"
          tooltip="注：法设置维度权重"
          show-colon
        >
          <a-select
            v-model="templateData.upperLimitType"
            :style="{ width: '320px' }"
            placeholder=""
            @change="changeType"
          >
            <a-option :value="1">设置上限</a-option>
            <a-option :value="2">不设置上限</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="templateData.upperLimitType === 1"
          label="上限分值"
          field="upperLimitScore"
          show-colon
        >
          <a-input-number
            :style="{ width: '320px' }"
            placeholder=""
            allow-clear
            v-model="templateData.upperLimitScore"
          >
            <template #suffix> % </template>
          </a-input-number>
        </a-form-item>
        <a-form-item label="评分计算" field="scoreCalculation" show-colon>
          <a-radio-group v-model="templateData.scoreCalculation">
            <a-radio :value="1">加和计算</a-radio>
            <a-radio :value="2">加权计算</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确认</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import { PerformanceAssessmentTemplateDimensionality } from '@/apis/management/performance/baseSetting/template/type';
import type { ProbationExamine } from '@/apis/human/base/variationManager/probation/type';
import { useVModel } from '@vueuse/core';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data: ProbationExamine; // 传进来的数据,
  }>(),
  {}
);

const emits = defineEmits(['update:visible', 'change']);
// const templateData = useVModel(props, 'data', emits);
const templateData = ref<ProbationExamine>({});
const drawerVisible = useVModel(props, 'visible', emits);

let refForm = ref();

const rules = reactive({
  upperLimitType: [
    {
      required: true,
      message: '请选择'
    }
  ],
  scoreCalculation: [
    {
      required: true,
      message: '请输入'
    },
    {
      //   validator: validateName
    }
  ],
  upperLimitScore: [
    {
      required: true,
      message: '请输入'
    }
  ]
});

watch(
  () => props.visible,
  (newVal: boolean) => {
    templateData.value = cloneDeep(props.data);
  }
);

const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  emits('change', templateData.value);
  drawerVisible.value = false;
};

const handleCancel = () => {
  drawerVisible.value = false;
};
const changeType = () => {
  if (templateData.value.upperLimitType === 2) {
    templateData.value.upperLimitScore = 0;
  }
};
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
